<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh-cn"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>图片|鸿马</title>
<meta name="description" content="高品质时尚、艺术、摄影、设计、插画类精美图片分享社区。" />
<meta name="keywords" content="时尚图片、创意图片、图片设计、艺术图片、摄影照片、平面设计、精品图片、精美图片、唯美图片" />
<meta content="Copyright 2012 ihongma.com" name="copyright" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="{config.templateskin}/css/global.css" type="text/css" media="screen" />
<script type=text/javascript src="{config.templateskin}/js/jquery-1.7.1.min.js"></script>
<!--[if lt IE 9]><script src="{config.templateskin}/js/html5.js"></script><![endif]-->


<!-- Styling for your grid blocks -->
<link rel="stylesheet" href="{config.templateskin}/css/style_pic.css" type="text/css" />
    


</head>
<body>

<%template src=/header.html/%>

<div class="inside">
  <ul class="c_menu">
  <li class="all">
                    <a id="all0" onclick="set(0)"  data-filter="tokyo" href="javascript:void(0)">
                        所有内容
                    </a>
                </li>
  <%set (DataTable){category_list}=get_category_list(channel_id, 0)%>
    <%loop cdr category_list%>
    <li class="new">
     
      <a id="all{cdr[id]}" href="javascript:void(0)" data-filter="tokyo" onclick="set({cdr[id]})">{cdr[title]}</a></li>
    <%/loop%>
   
  </ul>
  

  <div class="iw_wrapper">
    <div id="main" role="main">

      <ul id="tiles">
        <!-- These are our grid blocks -->
         
        
        <!-- End of grid blocks -->
      </ul>

    </div>
  </div>
</div>
        
        <%template src=/footer.html/%>
<!--[if lte IE 6]>
<style type="text/css">
html,body{overflow-x:hidden;}
#toTop{position:absolute;right:15px;bottom:45px;}
</style>
<![endif]-->

<!--[if lte IE 6]>
<script type="text/javascript">
function topFixed(){document.documentElement.scrollTop>300?document.getElementById("toTop").style.display="block":document.getElementById("toTop").style.display="none",document.getElementById("toTop").style.top=document.documentElement.clientHeight+document.documentElement.scrollTop-document.getElementById("toTop").clientHeight-45+"px"}window.onscroll=topFixed,window.resize=topFixed,topFixed()
</script>
<![endif]-->
  <a href="#" target="_self" id="toTop" title="返回顶部" onClick="window.scrollTo(0,0);return false" style="display:none;"></a>
  <script type="text/javascript">  
  function toTopHide(){document.documentElement.scrollTop+document.body.scrollTop>300?document.getElementById("toTop").style.display="block":document.getElementById("toTop").style.display="none"}window.onscroll=toTopHide
  </script>


 <!-- Include the plug-in -->

  <script src="{config.templateskin}/js/jquery.wookmark.js"></script>
  
  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
      var handler = null;
      var page = 1;
      var isLoading = false;
      var apiURL = '/tools/pic.ashx'
     
        // This updates the layout.
     
      // Prepare layout options.
      var options = {
          autoResize: true, // This will auto-update the layout when the browser window is resized.
          container: $('#main'), // Optional, used for some extra CSS styling
          offset: 10, // Optional, the distance between grid items
          itemWidth: 184 // Optional, the width of a grid item
      };
        sort = {category_id};
      function set(id) {
          sort = id;
          
         $("#tiles li").remove();
         page=1;
          loadData();
          
      }
      
      /**
      * When scrolled all the way to the bottom, add more tiles.
      */
      function onScroll(event) {
          // Only check when we're not still waiting for data.
          if (!isLoading) {
              // Check if we're within 100 pixels of the bottom edge of the broser window.
              var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
              if (closeToBottom) {
                  loadData();
              }
          }
      };

      /**
      * Refreshes the layout.
      */
      function applyLayout() {
          // Clear our previous layout handler.
          if (handler) handler.wookmarkClear();

          // Create a new layout handler.
          handler = $('#tiles li');
          handler.wookmark(options);
      };

      /**
      * Loads data from the API.
      */
      function loadData() {
          isLoading = true;
         // $('#loaderCircle').show();
          $(".c_menu li a").removeClass();
          $("#all" + sort).addClass("active");
          $.ajax({
              url: apiURL,
              dataType: 'json',
              data: { page: page,sort:sort }, // Page parameter to make sure we load new data
              success: onLoadData
          });
      };
      
      /**
      * Receives data from the API, creates HTML for images and updates the layout
      */
      function onLoadData(data) {
          if (data != null) {
              isLoading = false;
              //$('#loaderCircle').hide();

              // Increment page index for future calls.
              page++;

              // Create HTML for the images.
              var html = '';
              var i = 0, length = data.pic.length, image;
              for (; i < length; i++) {

                  image = data.pic[i];
                  html += '<li class="tokyo" >';

                  // Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that).
                  html += '<a href="/photo_show.aspx?id=' + image.id + '"><img src="' + image.img_url + '" width="174" height="' + Math.round(image.Height / image.width * 200) + '"></a>';

                  // Image title.
                  html += '<p><a href="/photo_show.aspx?id=' + image.id + '">' + image.title + '</a></p>';

                  html += '</li>';

              }

              // Add image HTML to the page.
              $('#tiles').append(html);

              // Apply layout.
              applyLayout();
          }
      };
     
      
      /**
       * When a filter is clicked, toggle it's active state and refresh.
       */
      
      $(document).ready(new function () {
          // Capture scroll event.
          $(window).bind('scroll', onScroll);

          // Load first data from the API.
          loadData();
      });
  </script>

  <!-- Once the page is loaded, initalize the plug-in. -->
  

</body>
</html>
